<script setup>
	import {
		ref
	} from 'vue'

	// 碳源分析选项
	const currentCarbon = ref('碳源分析')
	const carbonOptions = ref(['碳源分析', '交通出行', '饮食消费', '能源使用']) // 添加主选项
	const carbonArrow = ref('down')

	// 历史对比选项
	const currentYear = ref('历史对比')
	const yearOptions = ref(['历史对比', '年', '月', '周']) // 添加主选项
	const yearArrow = ref('down')

	const emit = defineEmits(['carbon-change', 'year-change'])

	// 选择器改变时触发
	const onCarbonChange = (e) => {
		const index = e.detail.value
		currentCarbon.value = carbonOptions.value[index]
		carbonArrow.value = carbonArrow.value === 'down' ? 'up' : 'down'
		emit('carbon-change', currentCarbon.value)
	}

	const onYearChange = (e) => {
		const index = e.detail.value
		currentYear.value = yearOptions.value[index]
		yearArrow.value = yearArrow.value === 'down' ? 'up' : 'down'
		emit('year-change', currentYear.value)
	}
</script>

<template>
	<view class="picker-container">
		<picker mode="selector" :range="carbonOptions" @change="onCarbonChange">
			<view class="picker">
				<view class="picker-name">{{ currentCarbon }}</view>
				<u-icon :name="'arrow-' + carbonArrow"></u-icon>
			</view>
		</picker>
		<picker mode="selector" :range="yearOptions" @change="onYearChange">
			<view class="picker">
				<view class="picker-name">{{ currentYear }}</view>
				<u-icon :name="'arrow-' + yearArrow"></u-icon>
			</view>
		</picker>
	</view>
</template>

<style scoped lang="scss">
	.picker-container {
		padding: 0 20rpx;
		display: flex;
		justify-content: space-around;
		margin-bottom: 20rpx;

		.picker {
			display: flex;
			justify-content: center;
			width: 200rpx;
			border: 2rpx solid #BBB;
			border-radius: 12rpx;
			line-height: 56rpx;
			margin-bottom: 20rpx;

			.picker-name {
				margin-right: 10rpx;
			}
		}
	}
</style>